<template>
	<view>
	
		<navigator class="ssk" url="/subpkg/ssy/ssy">
			<uni-icons color="#f8f8f8" type="search" size="18"></uni-icons>
			<view class="ssk_wb">
				搜索你想听的歌曲
			</view>
		</navigator>
		
		<my-gqk :List="RmList" :title="'热门音乐'"></my-gqk>
		
		<my-gqk :List="ZxList" :title="'最新音乐'"></my-gqk>
		
		<my-gqk :List="TjList" :title="'推荐歌单'"></my-gqk>
		
		<my-RankingList></my-RankingList>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				RmList: [],
				ZxList: [],
				TjList: []
			};
		},
		onLoad() {
			this.remen()
			this.rmgq()
			this.zxgq()
			this.tjgd()
		},
		methods: {
			async remen() {
				// 获取所有排行榜详情
				const { data } = await uni.$http.get('/toplist/detail')
				console.log(data.list)
			},
			async rmgq() {
				const { data:res } = await uni.$http.get('/playlist/track/all?id=3778678&limit=6&offset=1')
				this.RmList = res.songs
			},
			async zxgq() {
				const { data:res1 } = await uni.$http.get('/playlist/track/all?id=3779629&limit=6&offset=1')
				this.ZxList = res1.songs
			},
			async tjgd() {
				const { data:res2 } = await uni.$http.get('/top/playlist?limit=3')
				this.TjList = res2.playlists
			}
		}
	}
</script>

<style lang="scss">
.ssk {
	width: 90%;
	height: 80rpx;
	background-color: gainsboro;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 50rpx 4% 0;
	border-radius: 20px;
	
	.ssk_wb {
		margin-left: 5px;
		font-size: 14px;
		color: #f8f8f8;
	}
}

</style>
